<template>
  <div
    class="box"
    :id="name"
    @mouseover="() => mouseover(true)"
    @mouseout="() => mouseover(false)"
    :style="{
      marginLeft: `${style.left}px`,
      marginTop: `${style.top}px`,
      width: `${style.width}px`,
      height: `${style.height}px`,
      zIndex: style.zIndex,
    }"
    @mousedown="mousedown"
    @contextmenu="contextmenu"
  >
    <slot></slot>
  </div>
</template>
<script lang="ts">
import { defineComponent, PropType, renderSlot } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  emits: {
    mousedown: null,
    mouseover: null,
  },
  props: {
    style: {
      type: Object as PropType<{
        left: number;
        top: number;
        width: number;
        height: number;
        zIndex: number;
      }>,

      required: true,
    },
    type: {
      type: String,
      default: "card",
    },
    name: String,
  },
  setup(props, ctx) {
    const store = useStore();
    const mousedown = (e: any) => {
      ctx.emit("mousedown", { id: props.name, target: e });
    };
    const mouseover = (status: boolean) => {
      ctx.emit("mouseover", { id: props.name, status });
    };
    const contextmenu = (e: any) => {
      e.preventDefault(); //做一些兼容性的处理
      store.commit("rightClickChange", {
        show: true,
        ID: props.name,
        position: { x: e.clientX, y: e.clientY },
      });
    };
    return { mousedown, mouseover, contextmenu };
  },
});
</script>
<style lang="less" scoped>
.box {
  position: absolute;
  overflow: hidden;
  resize: both;
  border: 2px solid #fff;
  z-index: 2;
}
.box:hover {
  border: 2px solid #2491f7;
  cursor: move;
}

.box-boder {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.four-sides {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.box-check {
  z-index: 1;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  margin: -3px;
  background-color: #fff;
}
</style>
